<template>
  <right-template :title="componentData.title" :tabName="componentData.tabName">
    <el-form class="right-calendar">
      <dropdown-normal label="日历类型" :valLists="CALENDER_TYPE" v-model="commonAttr.calendarType" @change="onChangeAttr"></dropdown-normal>
      <template v-if="commonAttr.calendarType == CALENDER_TYPE_MAP.selectedDate">
        <input-normal label="可选择的最小日期" placehoder="2021/03/06" v-model="commonAttr.minDate" @change="onChangeAttr"></input-normal>
        <input-normal label="可选择的最大日期" placehoder="2021/03/06" v-model="commonAttr.maxDate" @change="onChangeAttr"></input-normal>
      </template>
      <color-normal v-model="commonAttr.backgroundColor" label="背景颜色" format="rgb" @change="onChangeAttr"></color-normal>
      <color-normal v-model="commonAttr.selectedBackgroundColor" label="选中背景颜色" format="rgb" @change="onChangeAttr"></color-normal>
      <color-normal v-model="commonAttr.color" label="日历颜色" format="rgb" @change="onChangeAttr"></color-normal>
      <color-normal v-model="commonAttr.selectedColor" label="日历选中颜色" format="rgb" @change="onChangeAttr"></color-normal>
      <input-normal label="选中边框地址" v-model="commonAttr.selectedBorderUrl" @change="onChangeAttr"></input-normal>
      <color-normal v-model="commonAttr.selectedBorderColor" label="选中边框颜色" format="rgb" @change="onChangeAttr"></color-normal>
      <input-normal label="日期字体大小" v-model="commonAttr.fontSize" @change="onChangeAttr"></input-normal>
      <!-- <el-button class="margin-16" type="primary" size="small" @click="productCalenderData">生成日历数据</el-button> -->
    </el-form>
  </right-template>
</template>

<script>
import RightTemplate from '@/views/child/right/right-template.vue'
import InputNormal from '@/views/components/edit/InputNormal.vue'
import ColorNormal from '@/views/components/edit/ColorNormal.vue'
import DropdownNormal from '@/views/components/edit/DropdownNormal.vue'

import { editUtils } from '@/views/js/edit-utils'
import { CALENDER_TYPE, CALENDER_TYPE_MAP } from '@/common/const'

export default {
  name: "RightCalender",
  mixins: [editUtils],
  setup () {
    return {
      CALENDER_TYPE: CALENDER_TYPE,
      CALENDER_TYPE_MAP: CALENDER_TYPE_MAP,
    };
  },
  components: {
    RightTemplate,
    InputNormal,
    ColorNormal,
    DropdownNormal,
  },
};
</script>
